<template>
  <div data-v-video123 class="video">
    <div class="top-nav">
      <NewTopNav></NewTopNav>
    </div>

    <div class="content">
      <div class="left-box">
        <div class="title">
          <h2>{{ videoDetails.title }}</h2>
          <span>{{ videoDetails.upload_date }}</span>
        </div>
        <div class="video-box">
          <video ref="curVideo" class="cur-video" controls>
            <source :src="videoDetails.video" type="video/mp4" />
            您的浏览器不支持 HTML5 video 标签。
          </video>
        </div>
        <div class="video-desc">
          <div class="desc-top">
            <i
              :data-count="likesCount"
              class="iconfont icon-good-fill"
              :class="{ collection: isLikes }"
              @click="setLikesStatus"
            ></i>
            <i
              slot="reference"
              :data-count="collectionCount"
              class="iconfont icon-collection-fill"
              :class="{ collection: isCollection }"
              @click="openDialog"
            ></i>

            <i class="iconfont icon-resonserate-fill"></i>
          </div>
          <span>{{ videoDetails.video_desc }}</span>
        </div>

        <div class="comment">
          <el-divider content-position="left">全部评论</el-divider>
          <!-- 顶部回复输入框 -->
          <div class="comment-input">
            <div class="input-left">
              <img :src="userinfo.user_pic" alt="" />
            </div>

            <div class="input-right">
              <el-input
                class="send-input"
                type="textarea"
                placeholder="请输入内容"
                v-model="parentReplyContent.textarea"
                resize="none"
              >
              </el-input>

              <span @click="sendComment(parentReplyContent)">发送</span>
            </div>
          </div>

          <div class="comment-list">
            <section
              v-for="item in commentList"
              :key="item.id"
              class="comment-item"
            >
              <div class="comment-item-left">
                <img :src="item.user_pic" alt="" />
              </div>

              <div class="comment-item-right">
                <div class="comment-item-right-top">
                  <span>{{ item.username }}</span>
                </div>
                <div class="comment-item-right-content">
                  <p style="white-space: pre-line">{{ item.comment }}</p>
                </div>
                <div class="comment-item-right-bottom">
                  <i class="iconfont">{{ item.comment_date }}</i>
                  <i class="iconfont" @click="getSendInput(item)">回复</i>
                  <i @click="openJubao(item)" class="iconfont">举报</i>
                </div>

                <ul class="children-comment">
                  <li
                    v-for="childrenItem in item.children"
                    :key="childrenItem.id"
                    class="children-comment-list"
                  >
                    <div class="children-comment-list-left">
                      <img :src="childrenItem.user_pic" alt="" />
                    </div>
                    <div class="children-comment-list-right">
                      <div class="children-comment-list-right-top">
                        <span>{{ childrenItem.username }}</span>
                        <span>@{{ childrenItem.reply_username }}:</span>
                      </div>
                      <div class="children-comment-list-right-content">
                        <p style="white-space: pre-line">
                          {{ childrenItem.comment }}
                        </p>
                      </div>
                      <div class="children-comment-list-right-bottom">
                        <i class="iconfont">{{ childrenItem.comment_date }}</i>
                        <i class="iconfont" @click="getSendInput(childrenItem)"
                          >回复</i
                        >
                        <i @click="openJubao(childrenItem)" class="iconfont"
                          >举报</i
                        >
                      </div>
                    </div>
                  </li>
                </ul>

                <div
                  :ref="'input' + item.id"
                  :id="'input' + item.id"
                  class="comment-input children-comment-input"
                  style="display: none"
                >
                  <div class="input-left">
                    <img :src="userinfo.user_pic" alt="" />
                  </div>

                  <div class="input-right">
                    <el-input
                      class="send-input"
                      type="textarea"
                      :placeholder="placeholderValue"
                      v-model="childrenReplyContent.textarea"
                      resize="none"
                    >
                    </el-input>

                    <span @click="sendComment(childrenReplyContent)">发送</span>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="user-box">
          <div class="user-tx">
            <img :src="videoDetails.user_pic" alt="" @click="toHomePage" />
          </div>
          <div class="user-info">
            <a href="#" class="user-name">{{ videoDetails.username }}</a>
            <span class="user-desc">{{ videoDetails.user_desc }}</span>
            <div v-if="!isMe" class="user-btn">
              <span v-if="!isFollow" @click="toFollow" class="gz">+关注</span>
              <span v-else @click="cancelFollow" class="gz">已关注</span>

              <span class="info" @click="toWhisper">发消息</span>
            </div>
          </div>
        </div>
        <div class="recommend-box">
          <section class="recommend-box-title"><h2>推荐列表</h2></section>

          <section
            v-for="item in videoList"
            :key="item.id"
            class="recommend-box-list"
          >
            <div class="recommend-box-left">
              <img :src="item.cover" alt="" />
            </div>
            <div class="recommend-box-right">
              <h2>
                {{ item.title }}
              </h2>
              <a href="#">{{ item.username }}</a>
              <span>{{ item.upload_date }}</span>
            </div>
          </section>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="centerDialogVisible"
      width="25%"
      center
      :before-close="handleClose"
    >
      <span slot="title" class="dialog-title"> 添加到收藏夹 </span>
      <el-checkbox-group class="checkbox-group" v-model="checkList">
        <el-checkbox
          v-for="item in collectionFolder"
          :key="item.id"
          :label="item.id"
          class="checkbox-group-item"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <el-input placeholder="请输入内容" v-model="inputFolder">
        <span slot="append" @click="addFolder">新建</span>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setCollection">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="commentDialogVisible"
      title="请选择举报理由"
      :visible.sync="commentDialogVisible"
      width="30%"
      center
    >
      <div class="radio-item">
        <span class="title">违法法律法规</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="违法违规">违法违规</el-radio>
          <el-radio label="色情">色情</el-radio>
          <el-radio label="低俗">低俗</el-radio>
          <el-radio label="赌博诈骗">赌博诈骗</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <span class="title">侵犯个人权益</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="人身攻击">人身攻击</el-radio>
          <el-radio label="侵犯隐私">侵犯隐私</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <span class="title">有害社区环境</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="垃圾广告">垃圾广告</el-radio>
          <el-radio label="引战">引战</el-radio>
          <el-radio label="青少年不良信息">青少年不良信息</el-radio>
        </el-radio-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendComplaint">确 定</el-button>
      </span>
    </el-dialog>

    <el-backtop target=".content"></el-backtop>
  </div>
</template>

<script>
import NewTopNav from "@/components/NewTopNav";

export default {
  name: "Video",
  components: {
    NewTopNav,
  },

  data: function () {
    return {
      userinfo: {},
      // 视频信息
      videoDetails: {},

      collectionCount: 0,
      likesCount: 0,

      // 评论信息
      commentList: [],

      // 推荐视频
      videoList: [],

      // 发送内容
      placeholderValue: "请输入内容",

      childrenReplyContent: {
        textarea: "",
        parentId: -1,
        replyUser: -1,
      },

      parentReplyContent: {
        textarea: "",
        parentId: -1,
        replyUser: -1,
      },

      isCollection: false,
      isLikes: false,
      isMe: false,
      isFollow: false,

      collectionFolder: [],
      checkList: [],
      oldCheckList: [],

      centerDialogVisible: false,
      inputFolder: "",

      commentDialogVisible: false,
      radio: "",

      currentComplaintItem: {},
    };
  },

  mounted() {
    this.$getuserinfo((data) => {
      // console.log(data);
      this.userinfo = data;
    });

    // 获取视频详情，获取发布者信息
    this.getVideoDetails();

    // 获取视频收藏数
    this.getCollectionCount();

    // 获取视频点赞数
    this.getLikesCount();

    // 获取评论列表
    this.getComments();

    // 获取推荐视频列表
    this.getVideo();

    this.getLikesStatus();

    this.getCollectionFolder();

    this.getCollectionStatus();
  },

  methods: {
    getVideoDetails() {
      // console.log(this.$route.params.id);

      this.axios
        .get(`/video/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.videoDetails = response.data.data;
            this.isMe = response.data.isMe;
            this.getFollow();

            // 更新video的src后需要重载
            this.$refs["curVideo"].load();
          } else if (response.data.status === 202) {
            console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getCollectionCount() {
      this.axios
        .get(`/getcollectioncount/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.collectionCount = response.data.data.count;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getLikesCount() {
      this.axios
        .get(`/getlikescount/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.likesCount = response.data.data.count;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getVideo() {
      this.axios
        .get("/recommend/video")
        .then((response) => {
          if (response.data.status === 200) {
            this.videoList = response.data.data;
            // console.log(this.videoList);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getComments() {
      this.axios
        .get(`/comments/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.commentList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getSendInput(item) {
      // console.log(item);
      const inputList = document.getElementsByClassName(
        "children-comment-input"
      );

      let refStr = "";
      for (let i = 0; i < inputList.length; i++) {
        inputList[i].style.display = "none";
      }

      if (item.parent_id === -1) {
        refStr = "input" + item.id;
        this.childrenReplyContent.parentId = item.id;
      } else {
        refStr = "input" + item.parent_id;
        this.childrenReplyContent.parentId = item.parent_id;
      }
      this.childrenReplyContent.replyUser = item.user;

      document.getElementById(refStr).style.display = "flex";
      this.placeholderValue = `@${item.username}`;
    },

    sendComment(replyContent) {
      if (!replyContent.textarea) {
        console.log("发送内容不能为空");
        return;
      }

      let now = new Date();

      this.axios
        .post(`/sendcomment`, {
          video_id: this.$route.params.id,
          parent_id: replyContent.parentId,
          reply_user: replyContent.replyUser,
          comment: replyContent.textarea,
          comment_date: now,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.commentList = response.data.data;
            this.childrenReplyContent.textarea = "";
            this.parentReplyContent.textarea = "";
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getCollectionStatus() {
      this.checkList = [];

      this.axios
        .get(`/getCollectionStatus/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // this.isCollection = response.data.data;

            if (response.data.data[0]) {
              this.isCollection = true;

              let arr = response.data.data;
              arr.forEach((item) => {
                +this.checkList.push(item.folder_id);
              });
            } else {
              this.isCollection = false;
            }
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getLikesStatus() {
      this.axios
        .get(`/getLikesStatus/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.isLikes = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    setLikesStatus() {
      if (this.isLikes) {
        this.isLikes = false;
        this.likesCount--;

        this.axios
          .get(`/deleteLikes/${this.$route.params.id}`)
          .then((response) => {
            if (response.data.status === 200) {
              console.log(response.data);
            } else {
              console.log(response);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.isLikes = true;
        this.likesCount++;

        this.axios
          .get(`/addLikes/${this.$route.params.id}`)
          .then((response) => {
            if (response.data.status === 200) {
              console.log(response.data);
            } else {
              console.log(response);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 获取收藏夹
    getCollectionFolder() {
      this.axios
        .get(`getCollectionFolder/${-1}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.collectionFolder = response.data.data;
            // console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addCollectionFolder() {
      this.axios
        .post(`addCollectionFolder`, {
          folderName: this.inputFolder,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.collectionFolder.push(response.data.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addFolder() {
      if (this.inputFolder == "") {
        return console.log("不能为空");
      }

      this.addCollectionFolder();
    },

    setCollection() {
      this.centerDialogVisible = false;

      this.axios
        .get(`/deleteCollection/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);

            if (this.checkList[0]) {
              this.axios
                .post(`/addCollection/${this.$route.params.id}`, {
                  checkList: this.checkList,
                })
                .then((response) => {
                  if (response.data.status === 200) {
                  } else {
                    console.log(response);
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
            this.getCollectionStatus();
            this.getCollectionCount();
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleClose(done) {
      this.getCollectionStatus();
      done();
    },

    openDialog() {
      this.getCollectionStatus();

      this.centerDialogVisible = true;
      this.oldCheckList = this.checkList;
    },

    getFollow() {
      this.axios
        .get(`getFollow/${this.videoDetails.video_issuer}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.isFollow = response.data.data;

            console.log(response.data.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toFollow() {
      this.isFollow = true;
      this.axios
        .get(`addFollow/${this.videoDetails.video_issuer}`)
        .then((response) => {
          if (response.data.status == 200) {
            console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    cancelFollow() {
      this.isFollow = false;
      this.axios
        .get(`cancelFollow/${this.videoDetails.video_issuer}`)
        .then((response) => {
          if (response.data.status == 200) {
            console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toWhisper() {
      const res = this.$router.resolve(
        `/whisper/${this.videoDetails.video_issuer}`
      );
      window.open(res.href, "_blank");
    },

    toHomePage() {
      const res = this.$router.resolve(
        `/homepage/${this.videoDetails.video_issuer}`
      );
      window.open(res.href, "_blank");
    },

    openJubao(item) {
      // console.log(item);
      this.commentDialogVisible = true;
      this.currentComplaintItem = item;
    },

    sendComplaint() {
      let video_id = this.currentComplaintItem.video_id;
      let comment_id = this.currentComplaintItem.id;
      let violator = this.currentComplaintItem.user;
      let why = this.radio;

      console.log(video_id, comment_id, violator, why);

      if (this.radio === "") {
        return this.$message.error("请选择举报理由！");
      }

      this.axios
        .post(`complaint`, {
          video_id,
          comment_id,
          violator,
          why,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.commentDialogVisible = false;
            this.$message.warning(response.data.msg);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.el-divider .el-divider__text {
  font-size: 18px;
  padding: 0 10px;
}

.el-textarea .el-textarea__inner {
  height: 60px;
  border: 1px solid #eee;
}

.checkbox-group {
  padding: 10px 0 20px 0;
}

.checkbox-group .checkbox-group-item {
  display: block;
}

.checkbox-group .checkbox-group-item .el-checkbox__input .el-checkbox__inner {
  width: 18px;
  height: 18px;
}

.checkbox-group .checkbox-group-item .el-checkbox__label {
  font-size: 16px;
}

.el-dialog__wrapper .el-dialog--center .el-dialog__body {
  padding: 10px 25px;
}

.el-dialog__header {
  border-bottom: 1px solid #e3e3e3;
}

.el-dialog__wrapper .el-dialog--center .el-dialog__footer {
  padding: 10px 25px;
}

.el-dialog__wrapper .el-dialog {
  margin-top: 0 !important;
  top: 50%;
  transform: translateY(-50%);
}

.dialog-title {
  font-size: 20px;
}
</style>

<style lang="scss" scoped>
.video[data-v-video123] {
  width: 100%;
  height: 100%;

  overflow: scroll;
  overflow-x: hidden;

  .collection {
    color: #00a1d6 !important;
  }

  .top-nav {
    width: 100%;
    height: 7%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 0 6px #eee;
  }

  .content {
    display: flex;
    justify-content: center;
    width: 80%;
    height: 93%;
    margin: 0 auto;

    .left-box {
      width: 880px;

      .title {
        height: 90px;
        // background-color: #5c49ac;

        padding-top: 15px;

        h2 {
          font-size: 22px;
        }

        span {
          display: inline-block;
          margin-top: 8px;
          font-size: 16px;
          color: rgb(140, 140, 140);
        }
      }

      .video-box {
        width: 100%;
        height: 550px;
        // background-color: #1b1a1f;

        .cur-video {
          width: 100%;
          height: 100%;
          background-color: #141314;
        }
      }

      .video-desc {
        // background-color: #5c49ac;

        .desc-top {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px solid rgb(219, 214, 214);

          i {
            font-size: 28px;
            color: #757575;
            margin-right: 30px;
            cursor: pointer;
          }

          i::after {
            content: attr(data-count);
            font-size: 18px;
            margin-left: 8px;
          }

          .collection-popover {
            width: unset;
            padding: 0;
          }
        }

        span {
          display: inline-block;
          width: 100%;
          padding: 20px 0;
          // border-bottom: 1px solid rgb(219, 214, 214);
        }
      }

      .comment {
        width: 100%;
        padding: 10px 0;

        .comment-input {
          display: flex;
          justify-content: space-around;
          width: 100%;
          padding: 5px 0;

          .input-left {
            width: 50px;
            height: 50px;

            img {
              display: inline-block;
              width: 50px;
              height: 50px;
              object-fit: cover;
              border-radius: 50%;
            }
          }

          .input-right {
            display: flex;
            width: 92%;
            // padding-bottom: 60px;
            // border-bottom: 1px solid #dcdfe6;

            .send-input {
              width: 955px;
            }

            span {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 60px;
              margin-left: 8px;
              color: #fff;
              background-color: #6768ab;
              border-radius: 3px;
              cursor: pointer;
              transition: all 0.5s;
            }

            span:hover {
              opacity: 0.9;
            }
          }
        }

        .comment-list {
          width: 100%;
          min-height: 200px;
          padding: 20px 0;

          .comment-item {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 10px 0;

            .comment-item-left {
              img {
                display: inline-block;
                width: 50px;
                height: 50px;
                object-fit: cover;
                border-radius: 50%;
              }
            }

            .comment-item-right {
              width: 92%;
              padding-bottom: 15px;
              border-bottom: 1px solid #dcdfe6;

              .comment-item-right-top {
                span:nth-child(1) {
                  font-size: 16px;
                  color: rgb(251, 114, 153);
                  padding-right: 10px;
                }

                span:nth-child(2) {
                  font-size: 15px;
                  color: #757575;
                }
              }

              .comment-item-right-content {
                padding: 10px 0;
              }

              .comment-item-right-bottom {
                position: relative;

                i {
                  font-size: 15px;
                  color: #757575;
                  cursor: pointer;
                }

                i:nth-child(1) {
                  padding-right: 20px;
                }

                i:nth-child(3) {
                  position: absolute;
                  right: 20px;
                }

                i::before {
                  margin-right: 5px;
                }
              }

              .children-comment {
                width: 100%;

                .children-comment-list {
                  display: flex;
                  justify-content: space-around;
                  width: 100%;
                  padding: 10px 0;

                  .children-comment-list-left {
                    img {
                      display: inline-block;
                      width: 40px;
                      height: 40px;
                      object-fit: cover;
                      border-radius: 50%;
                    }
                  }

                  .children-comment-list-right {
                    width: 93%;
                    // padding-bottom: 15px;
                    // border-bottom: 1px solid #dcdfe6;

                    .children-comment-list-right-top {
                      span:nth-child(1) {
                        font-size: 16px;
                        color: rgb(251, 114, 153);
                        padding-right: 6px;
                      }

                      span:nth-child(2) {
                        font-size: 14px;
                        color: #00a1d6;
                      }
                    }

                    .children-comment-list-right-content {
                      padding: 10px 0;
                      font-size: 16px;

                      p {
                        i {
                          margin-right: 5px;
                          font-style: normal;
                          color: #00a1d6;
                        }
                      }
                    }

                    .children-comment-list-right-bottom {
                      position: relative;

                      i {
                        font-size: 13px;
                        color: #757575;
                        cursor: pointer;
                      }

                      i:nth-child(1) {
                        padding-right: 20px;
                      }

                      i:nth-child(3) {
                        position: absolute;
                        right: 20px;
                      }

                      i::before {
                        margin-right: 5px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .right-box {
      width: 320px;
      // background-color: orange;

      .user-box {
        display: flex;
        width: 86%;
        height: 90px;
        margin: 0 auto;
        padding-top: 10px;

        .user-tx {
          width: 50px;
          height: 50px;
          margin-right: 15px;
          border-radius: 50%;

          img {
            width: 100%;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
          }
        }

        .user-info {
          .user-name {
            display: block;
            font-size: 15px;
            color: #fc8899;
          }

          .user-desc {
            font-size: 15px;
            color: rgb(133, 133, 133);
            margin: 5px 0;
          }

          .user-btn {
            margin-top: 5px;

            span {
              display: inline-block;
              width: 70px;
              height: 25px;
              line-height: 25px;
              font-size: 15px;
              text-align: center;
              background-color: #fff;
              border-radius: 3px;
              cursor: pointer;
            }

            .gz {
              margin-right: 20px;
              color: #fff;
              background-color: #00a1d6;
            }

            .info {
              color: rgb(85, 85, 85);
              border: 1px solid rgb(218, 212, 212);
            }
          }
        }
      }

      .recommend-box {
        width: 86%;
        margin: 0 auto;

        .recommend-box-title {
          padding: 10px;
          margin-bottom: 15px;
          background-color: #eee;

          h2 {
            font-size: 18px;
          }
        }

        .recommend-box-list {
          display: flex;
          position: relative;
          width: 100%;
          height: 100px;
          margin-bottom: 25px;

          .recommend-box-left {
            width: 45%;
            height: 100%;
            // background-color: #1b1a1f;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 5px;
            }
          }

          .recommend-box-right {
            width: 55%;
            height: 100%;
            padding: 3px 5px 5px 5px;

            h2 {
              height: 40px;
              font-size: 15px;
              text-align: justify;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            a {
              display: block;
              margin: 5px 0;
              font-size: 15px;
              color: rgb(133, 133, 133);
            }

            span {
              font-size: 15px;
              color: rgb(133, 133, 133);
            }
          }
        }

        .recommend-box-list::after {
          position: absolute;
          left: 0;
          bottom: -15px;
          content: "";
          width: 100%;
          height: 1px;
          background-color: rgb(218, 212, 212);
        }
      }
    }
  }
}
</style>